{% extends "templates/web.html" %}

{% block page_content %}
<link rel="stylesheet" type="text/css" href="/assets/upsystem/css/tms_common.css">
<div class="tms-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
        <nav class="breadcrumb-nav">
            <a href="/upsystem/my_erpnext_page" class="breadcrumb-item">物流门户</a>
            <span class="breadcrumb-separator">/</span>
            <a href="/upsystem/tms_order" class="breadcrumb-item">订单中心</a>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-item active">订单详情</span>
        </nav>
    </div>

    <!-- 订单详情内容 -->
    <div class="order-detail-container">
        <!-- 左侧信息 -->
        <div class="info-section">
            <h3 class="tms-section-title">基本信息</h3>
            <div class="info-grid">
                <div class="info-item">
                    <label class="info-label">运单号:</label>
                    <span class="info-value" id="waybillNumber">--</span>
                </div>
                <div class="info-item">
                    <label class="info-label">订单ID:</label>
                    <span class="info-value">ORD-001</span>
                </div>
                <div class="info-item">
                    <label class="info-label">跟踪号:</label>
                    <span class="info-value">TRK123456789</span>
                </div>
                <div class="info-item">
                    <label class="info-label">运输方式:</label>
                    <span class="info-value">空运</span>
                </div>
                <div class="info-item">
                    <label class="info-label">订单状态:</label>
                    <span class="tms-status-badge transit">运输中</span>
                </div>
                <div class="info-item">
                    <label class="info-label">创建时间:</label>
                    <span class="info-value">2024-01-15 10:30</span>
                </div>
                <div class="info-item">
                    <label class="info-label">包裹重量:</label>
                    <span class="info-value">2.5 kg</span>
                </div>
                <div class="info-item">
                    <label class="info-label">预估费用:</label>
                    <span class="info-value">¥156.80</span>
                </div>
                <div class="info-item">
                    <label class="info-label">收件人国家:</label>
                    <span class="info-value">美国</span>
                </div>
                <div class="info-item">
                    <label class="info-label">EU税号:</label>
                    <span class="info-value">US123456789</span>
                </div>
                <div class="info-item">
                    <label class="info-label">电话:</label>
                    <span class="info-value">+1 555-123-4567</span>
                </div>
                <div class="info-item">
                    <label class="info-label">收件时间:</label>
                    <span class="info-value">2024-01-15 14:20</span>
                </div>
                <div class="info-item">
                    <label class="info-label">外包装数量:</label>
                    <span class="info-value">1</span>
                </div>
                <div class="info-item">
                    <label class="info-label">IOSS代码:</label>
                    <span class="info-value">IM123456789</span>
                </div>
                <div class="info-item">
                    <label class="info-label">预付款:</label>
                    <span class="info-value">¥0.00</span>
                </div>
                <div class="info-item">
                    <label class="info-label">配送时间:</label>
                    <span class="info-value">5-7天</span>
                </div>
                <div class="info-item">
                    <label class="info-label">计费重量:</label>
                    <span class="info-value">2.8 kg</span>
                </div>
            </div>
        </div>

        <!-- 右侧信息 -->
        <div class="info-section">
            <h3 class="tms-section-title">收件人信息</h3>
            <div class="info-grid">
                <div class="info-item">
                    <label class="info-label">收件人姓名:</label>
                    <span class="info-value">John Smith</span>
                </div>
                <div class="info-item">
                    <label class="info-label">收件人地址:</label>
                    <span class="info-value">123 Main Street</span>
                </div>
                <div class="info-item">
                    <label class="info-label">收件人州/省:</label>
                    <span class="info-value">California</span>
                </div>
                <div class="info-item">
                    <label class="info-label">门牌号:</label>
                    <span class="info-value">Apt 4B</span>
                </div>
                <div class="info-item">
                    <label class="info-label">公司:</label>
                    <span class="info-value">ABC Corp</span>
                </div>
                <div class="info-item">
                    <label class="info-label">提交时间:</label>
                    <span class="info-value">2024-01-15 09:15</span>
                </div>
                <div class="info-item">
                    <label class="info-label">VAT代码:</label>
                    <span class="info-value">VAT123456</span>
                </div>
                <div class="info-item">
                    <label class="info-label">收件人城市:</label>
                    <span class="info-value">Los Angeles</span>
                </div>
                <div class="info-item">
                    <label class="info-label">配送证明:</label>
                    <span class="info-value">已上传</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="order-actions">
        <button class="tms-btn tms-btn-primary" id="editOrderBtn">
            <i class="fas fa-edit"></i> 编辑订单
        </button>
        <button class="tms-btn tms-btn-secondary" id="printLabelBtn">
            <i class="fas fa-print"></i> 打印标签
        </button>
        <button class="tms-btn tms-btn-secondary" id="trackPackageBtn">
            <i class="fas fa-shipping-fast"></i> 跟踪包裹
        </button>
        <button class="tms-btn tms-btn-secondary" id="downloadDocsBtn">
            <i class="fas fa-download"></i> 下载文档
        </button>
        <button class="tms-btn tms-btn-secondary" id="shareOrderBtn">
            <i class="fas fa-share"></i> 分享订单
        </button>
    </div>
</div>

<script>
// 使用TMS系统的JavaScript功能
document.addEventListener('DOMContentLoaded', function() {
    // 初始化TMS系统
    if (window.TMS) {
        console.log('订单详情页面初始化开始');

        // 解析URL参数
        parseURLParams();

        // 绑定事件
        bindEvents();

        // 加载订单数据
        loadOrderData();

        console.log('订单详情页面初始化完成');
    } else {
        console.warn('TMS系统未加载，使用基础功能');
        parseURLParams();
        bindEvents();
        loadOrderData();
    }
});

// 解析URL参数
function parseURLParams() {
    const urlParams = new URLSearchParams(window.location.search);
    const waybillNumber = urlParams.get('wayBillNumber');

    if (waybillNumber) {
        if (window.TMS) {
            console.log('从URL获取运单号:', waybillNumber);
        }

        // 更新页面显示的运单号
        const waybillElement = document.getElementById('waybillNumber');
        if (waybillElement) {
            waybillElement.textContent = waybillNumber;
        }
    } else {
        if (window.TMS) {
            console.warn('URL中未找到运单号参数');
        }
    }
}

// 绑定事件
function bindEvents() {
    // 编辑订单按钮
    const editOrderBtn = document.getElementById('editOrderBtn');
    if (editOrderBtn) {
        editOrderBtn.addEventListener('click', handleEditOrder);
    }

    // 打印标签按钮
    const printLabelBtn = document.getElementById('printLabelBtn');
    if (printLabelBtn) {
        printLabelBtn.addEventListener('click', handlePrintLabel);
    }

    // 跟踪包裹按钮
    const trackPackageBtn = document.getElementById('trackPackageBtn');
    if (trackPackageBtn) {
        trackPackageBtn.addEventListener('click', handleTrackPackage);
    }

    // 下载文档按钮
    const downloadDocsBtn = document.getElementById('downloadDocsBtn');
    if (downloadDocsBtn) {
        downloadDocsBtn.addEventListener('click', handleDownloadDocs);
    }

    // 分享订单按钮
    const shareOrderBtn = document.getElementById('shareOrderBtn');
    if (shareOrderBtn) {
        shareOrderBtn.addEventListener('click', handleShareOrder);
    }
}

// 加载订单数据
function loadOrderData() {
    const waybillNumber = document.getElementById('waybillNumber').textContent;

    if (waybillNumber === '--') {
        if (window.TMS) {
            console.warn('运单号无效，无法加载订单数据');
        }
        return;
    }

    if (window.TMS) {
        console.log('开始加载订单数据:', waybillNumber);
    }

    // 这里可以调用API加载实际的订单数据
    // 目前使用静态数据作为示例

    if (window.TMS) {
        console.log('订单数据加载完成');
    }
}

// 编辑订单处理
function handleEditOrder() {
    const waybillNumber = document.getElementById('waybillNumber').textContent;

    if (window.TMS) {
        console.log('用户点击编辑订单:', waybillNumber);
    }

    alert(`编辑订单: ${waybillNumber}\n\n编辑功能将集成您的订单管理系统`);
}

// 打印标签处理
function handlePrintLabel() {
    const waybillNumber = document.getElementById('waybillNumber').textContent;

    if (window.TMS) {
        console.log('用户点击打印标签:', waybillNumber);
    }

    alert(`打印标签: ${waybillNumber}\n\n打印功能将集成您的标签打印系统`);
}

// 跟踪包裹处理
function handleTrackPackage() {
    const waybillNumber = document.getElementById('waybillNumber').textContent;

    if (window.TMS) {
        console.log('用户点击跟踪包裹:', waybillNumber);
    }

    // 跳转到跟踪页面
    window.location.href = `/upsystem/tms_tracking?waybill=${waybillNumber}`;
}

// 下载文档处理
function handleDownloadDocs() {
    const waybillNumber = document.getElementById('waybillNumber').textContent;

    if (window.TMS) {
        console.log('用户点击下载文档:', waybillNumber);
    }

    alert(`下载文档: ${waybillNumber}\n\n下载功能将集成您的文档管理系统`);
}

// 分享订单处理
function handleShareOrder() {
    const waybillNumber = document.getElementById('waybillNumber').textContent;

    if (window.TMS) {
        console.log('用户点击分享订单:', waybillNumber);
    }

    // 生成分享链接
    const shareUrl = `${window.location.origin}/upsystem/tms_order_detail?wayBillNumber=${waybillNumber}`;

    // 复制到剪贴板
    if (navigator.clipboard) {
        navigator.clipboard.writeText(shareUrl).then(() => {
            alert('分享链接已复制到剪贴板！');
        }).catch(() => {
            // 如果剪贴板API不可用，显示链接
            prompt('分享链接:', shareUrl);
        });
    } else {
        prompt('分享链接:', shareUrl);
    }
}
</script>
{% endblock %}
